<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{{asset('layui-master/src/css/layui.css')}}">
    <link rel="stylesheet" href="{{asset('bootstrap/css/bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{asset('css/lesson.css')}}" media="all">
    <style>

    </style>
</head>
<body>
<div class="layui-tab layui-tab-card box_card">
    <ul class="layui-tab-title">
        <li><a href="/admin/lesson">课程列表</a></li>
        <li class="layui-this"><a href="/admin/lesson/create">新增课程</a></li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form method="post" action="/admin/lesson" class="layui-form">
                {{csrf_field()}}
                <div id="from_box">
                    <h3 class="from_title"><span>课程管理</span></h3>
                    <div class="layui-form-item">
                        <label class="layui-form-label">课程标题</label>
                        <div class="layui-input-block">
                            <input name="title" type="text" lay-verify="required" placeholder="请输入新增用户名" autocomplete="on" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">介绍</label>
                        <div class="layui-input-block">
                            <textarea name="introduce" placeholder="请输入介绍内容" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">预览图</label>
                        <div class="layui-input-block">
                            <input name="preview" type="text" lay-verify="required" placeholder="请输入你的身份" autocomplete="on" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">推荐</label>
                        <div class="layui-input-block">
                            <input type="radio" name="iscommend" value="1" title="是" checked>
                            <input type="radio" name="iscommend" value="0" title="否">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">热门</label>
                        <div class="layui-input-block">
                            <input type="radio" name="ishot" value="1" title="是" checked>
                            <input type="radio" name="ishot" value="0" title="否">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">点击数</label>
                        <div class="layui-input-block">
                            <input name="click" type="text" lay-verify="required" placeholder="0" autocomplete="on" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="video_Manage" id="app">
                    <h3 class="from_title"><span>视频管理</span></h3>
                    <div class="content_box" v-for="(v,k) in videos">
                        <div class="video_little_box">
                            <div class="layui-form-item">
                                <label class="layui-form-label">视频标题</label>
                                <div class="layui-input-block">
                                    <input name="video_title" type="text" lay-verify="required" v-model="v.video_title" placeholder="请输入视频名称" autocomplete="on" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">视频地址</label>
                                <div class="layui-input-block">
                                    <div class="input-group">
                                        <input type="text" class="form-control" v-model="v.video_path">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default" type="button">上传视频</button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="video_del_box">
                                <button id="video_del" @click.prevent="del(k)">删除视频</button>
                            </div>
                        </div>
                    </div>
{{--                    存储视频数据的文本域，为一个JSON格式--}}
                    <textarea name="videos" hidden>@{{videos}}</textarea>
                    <div class="but_box">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" @click.prevent="add()">添加视频</button>
                    </div>
                </div>
                <button class="layui-btn submit_style" id="from_but" lay-submit lay-filter="formDemo">保存数据</button>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript" src="{{asset('layui-master/src/layui.js')}}"></script>
<script type="text/javascript" src="{{asset('js/jquery-1.11.3.min.js')}}"></script>
<script type="text/javascript" src="{{asset('bootstrap/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{asset('js/vue.js')}}"></script>
<script type="text/javascript" >
    layui.use('form', function(){
        let form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

        //但是，如果你的HTML是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来进行渲染
        // form.render();
    });

    const app = new Vue({
        el:'#app',
        data:{
            videos: [{video_title: '', video_path: ''}]
        },
        methods: {
            add: function () {
                this.videos.push({video_title: '', video_path: ''});
            },
            del: function (k) {
                // splice替换函数，本该有三个参数，当省略第三个参数时表示替换成空，则变成删除函数了
                // 表示从videos的第k个元素开始，删除一个数据
                this.videos.splice(k,1);
            }
        }
    })

</script>
</body>
@include('admin.layout.error')
</html>
